<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView with ACT Modal Popup as Delete Confirmation" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <style type="text/css">
        .modalBackground
        {
            background-color: #e6e6e6;
            filter: alpha(opacity=60);
            opacity: 0.60;
        }
    </style>
    <asp:ScriptManagerProxy ID="TheScriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Act/Scripts/Common.js" />
            <asp:ScriptReference Path="~/Act/Scripts/BaseScripts.js" />
            <asp:ScriptReference Path="~/Act/Scripts/Timer.js" />
            <asp:ScriptReference Path="~/Act/Scripts/DragDropScripts.js" />
            <asp:ScriptReference Path="~/Act/Scripts/FloatingBehavior.js" />
            <asp:ScriptReference Path="~/Act/Scripts/DropShadowBehavior.js" />
            <asp:ScriptReference Path="~/Act/Scripts/ModalPopupBehavior.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
    <h3>ACT Modal Popup as Delete Confirmation</h3>
    <table>
        <tr>
            <td style="text-align:left">
                <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" SortColumn="Company" SortOrderAscendingImageUrl="~/Images/up.gif" SortOrderDescendingImageUrl="~/Images/dn.gif" SortCommandEvent="onSortCommand" DeleteCommandEvent="onDeleteCommand">
                   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                   <RowStyle CssClass="RowStyle"/>
                   <HeaderStyle CssClass="HeaderStyle"/>
                   <Columns>
                        <AjaxData:GridViewCommandColumn ShowDeleteButton="true" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Customer" DataField="Company" SortField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" SortField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" SortField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                   </Columns>
                </AjaxData:GridView>
            </td>
        </tr>
        <tr>
            <td style="text-align:right">
                <AjaxData:Pager ID="Pager1" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage" OtherPageStyle-CssClass="PagerOtherPage" PageChangedEvent="pageChanged"></AjaxData:Pager>
            </td>
        </tr>
    </table>
    <div id="divDialog" style="background-color:#ffffff;padding:8px;width:300px;display:none;overflow:hidden;">
        <div>
            Are you sure you want to delete this record?
        </div>
        <div style="margin-top:4px;float:right">
            <input id="btnOk" type="button" value="Ok"/>
            <input id="btnCancel" type="button" value="Cancel"/>
        </div>
    </div>
    <script type="text/javascript">

        var _gridView;
        var _pager;

        var _customers;

        var _modalDialog;
        var _customerIDToDelete;

        function pageLoad(sender, e)
        {
            _modalDialog = $create(AjaxControlToolkit.ModalPopupBehavior, {'BackgroundCssClass':'modalBackground','DropShadow':true,'PopupControlID':'divDialog','OkControlID':'btnOk', 'CancelControlID':'btnCancel','OnOkScript':onOk, 'OnCancelScript': onCancel, 'id':'deleteConfirmation'}, null, null, $get('divDialog'));

            _gridView = GridView1;
            _pager = Pager1;
            loadCustomers();
        }

        function loadCustomers()
        {
            //Need to convert the sortoder which so WS understand
            var sortColumn = _gridView.get_sortColumn();
            var sortOrder = (_gridView.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            DataService.GetCustomerList(startIndex, _pager.get_pageSize(), sortColumn, sortOrder, onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _customers = result.Rows;
            _pager.set_recordCount(result.Total);
            bindCustomers();
        }

        function bindCustomers()
        {
            _gridView.set_dataSource(_customers);
            _gridView.dataBind();
        }

        function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            _pager.set_pageIndex(0); // need to reset the current page as sorting is changed
            _gridView.set_editIndex(-1);
            loadCustomers();
        }

        function onDeleteCommand(sender, e)
        {
            _customerIDToDelete = _gridView.get_dataKeys()[e.get_row().get_rowIndex()];
            _modalDialog.show();
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            _gridView.set_editIndex(-1);
            loadCustomers();
        }

        function onOk()
        {
            DataService.DeleteCustomer(
                                        _customerIDToDelete,
                                        function(result)
                                        {
                                            if (result == true)
                                            {
                                                loadCustomers();
                                            }
                                        }
                                      );
            _modalDialog.hide();
        }

        function onCancel()
        {
            _modalDialog.hide();
        }

    </script>
</asp:Content>